<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<p> 发送json</p>

<div>
    <button id="send_json">发送</button>
</div>


<p>发送文件</p>

<div>
    <form id="send_file">
        <input type="file" name="face" id="select_file"><br/>
        <input type="submit" value="上传用户脸部">
    </form>
    <div id="user_preview"></div>

</div>


<script src="/js/jquery.js"></script>
<script type="text/javascript">
    function sendJson() {
        var json = {foo: 1, bar: "world"};
        $.ajax({
            url: '/test/json',
            type: "POST",
            headers: {"Content-Type": "application/json;charset=UTF-8"},
            data: JSON.stringify(json),
            success: function (res) {
                console.log('json success', res);
            },
            error: function (xhr) {
                console.log('json fail', xhr.responseText);
            }
        });
    }
    $('#send_json').on('click', function (event) {
        sendJson();
    });

    var file;
    $('#select_file').on('change', function (event) {
        console.log('select_file');
        file = event.target.files[0];
    });

    function sendFile() {
        var formData = new FormData();
        formData.append("face", file);
        $.ajax({
            url: '/test/file',
            type: "POST",
            processData: false,
            contentType: false,
            data: formData,
            success: function (res) {
                console.log('file success', res);
            },
            error: function (xhr) {
                console.log('file fail', xhr.responseText);
            }
        });
    }

    $('form#send_file').submit(function (event) {
        sendFile();
        return false;
    });
</script>
</body>
</html>